import Svg, { SvgComponent } from "@/components/base/Svg"
import Image from "@/components/base/Image"
import styled from "@emotion/styled"
import { memo, useMemo } from "react"

const IconWrapper = styled.div`
    width: 24rem;
    height: 24rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
`

const IconImage = styled.div`
    width: 24rem;
    height: 24rem;
    border-radius: 50%;

    > img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
`

export const WelfareFixedSvgWrapper = styled(SvgComponent("bottomNavigateBar/welfare_fixed.svg"))`
    width: 11.6rem;
    height: 18rem;
    position: absolute;
    top: -3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
`

const WelfareRotate = styled(SvgComponent("bottomNavigateBar/welfare_rotate.svg"))`
    width: 24rem;
    height: 24rem;
    animation: rotate 8s linear infinite;

    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
`

type Props = {
    active?: boolean
}

type IconType = "home" | "points" | "invite" | "my"

interface BaseIconProps extends Props {
    type: IconType
}

const BaseIcon = memo(({ active, type }: BaseIconProps) => {
    const iconResources = useMemo(
        () => ({
            home: {
                default: <Svg src="bottomNavigateBar/home.svg" />,
                active: <Svg src="bottomNavigateBar/home_active.svg" />,
            },
            points: {
                default: <Svg src="bottomNavigateBar/points.svg" />,
                active: <Svg src="bottomNavigateBar/points_active.svg" />,
            },
            invite: {
                default: <Svg src="bottomNavigateBar/invite.svg" />,
                active: <Svg src="bottomNavigateBar/invite_active.svg" />,
            },
            my: {
                default: <Image src="bottomNavigateBar/my.webp" />,
                active: <Image src="bottomNavigateBar/my_active.webp" />,
            },
        }),
        [],
    )

    const resources = iconResources[type]

    return (
        <IconWrapper>
            <IconImage>{active ? resources.active : resources.default}</IconImage>
        </IconWrapper>
    )
})

// 导出具体图标组件
export const HomeIcon = (props: Props) => (
    <BaseIcon
        type="home"
        {...props}
    />
)
export const PointsIcon = (props: Props) => (
    <BaseIcon
        type="points"
        {...props}
    />
)
export const InviteIcon = (props: Props) => (
    <BaseIcon
        type="invite"
        {...props}
    />
)
export const MyIcon = (props: Props) => (
    <BaseIcon
        type="my"
        {...props}
    />
)

// WelfareIcon 保持不变
export const WelfareIcon = memo(({ active }: Props) => (
    <IconWrapper>
        <WelfareFixedSvgWrapper />
        <WelfareRotate />
    </IconWrapper>
))
